<script setup>

import {getCurrentInstance, ref} from "vue";
import {changeSysUserStatus, deleteSysUser, listSysUser} from "@/api/system/user";
import {enumToArray} from "@/utils/utils";
import {userStatusList} from "@/enum/enum";
import SysUserForm from "@/views/system/user/SysUserForm.vue";
import {cloneDeep} from "lodash";
import SysUserResetPwdForm from "@/views/system/user/SysUserResetPwdForm.vue";

const {proxy} = getCurrentInstance();
const sysUserList = ref([]);
const total = ref(0);
const queryFormRef = ref();
const queryForm = ref({
  pageNo: 1,
  pageSize: 10,
  userName: null,
  status: null,
  phonenumber: null,
  timeArr: null
})
const sysUserFormRef = ref();
const resetPwdRef = ref()
const userStatusOptions = enumToArray(userStatusList)
const selectIdIndex = ref(-1);
const selectId = ref()

const getList = async () => {
  const {data} = await listSysUser(queryForm.value);
  total.value = data.total;
  sysUserList.value = data.list;
}

const handleSelectionChange = (index, row) => {
  selectIdIndex.value = index;
  selectId.value = row.userId;
}

const handleQuery = () => {
  queryForm.value.pageNo = 1;
  getList();
}

const handleReset = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

const openUser = (userId, type) => {
  sysUserFormRef.value.open(userId, type)
}

const handleUpdate = () => {
  if (!selectId.value) {
    proxy.$modal.warningNotify('请选择一条数据');
    return false;
  }
  openUser(selectId.value, 'update');
}

const handleDelete = () => {
  if (!selectId.value) {
    proxy.$modal.warningNotify('请选择一条数据');
    return false;
  }
  delSysUser(selectId.value)
}

const delSysUser = async (userId) => {
  proxy.$modal.confirm('确定删除该记录吗？').then(async () => {
    await deleteSysUser(userId);
    proxy.$modal.okNotify('删除成功');
    await getList();
  })
}

const handleChangeStatus = async (value, row) => {
  let data = cloneDeep(row);
  data.status = value;
  await changeSysUserStatus(data);
  proxy.$modal.okNotify('修改成功');
}

const handleResetPwd = (userId) => {
  resetPwdRef.value?.open(userId)
}

getList();
</script>

<template>
  <div class="app-container">

    <a-form :model="queryForm" ref="queryFormRef" layout="inline" class="demo-form-inline">
      <a-form-item label="用户名称" name="userName">
        <a-input v-model:value="queryForm.userName" placeholder="请输入用户名称"/>
      </a-form-item>
      <a-form-item label="手机号码" name="phonenumber">
        <a-input v-model:value="queryForm.phonenumber" placeholder="请输入手机号码"/>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-select v-model:value="queryForm.status" placeholder="请选择状态">
          <a-select-option v-for="(item, index) in userStatusOptions" :key="index" :label="item.label"
                           :value="item.value"/>
        </a-select>
      </a-form-item>
      <a-form-item label="创建时间" name="timeArr">
        <a-range-picker
            v-model="queryForm.timeArr"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item>
        <a-space wrap>
          <a-button type="primary" @click="handleQuery" class="flex items-center mr-2">
            <icon icon="ep-search" size="14px" color="unset" class="mr-1"/>
            查询
          </a-button>
          <a-button plain @click="handleReset" class="flex items-center">
            <icon icon="ep-refresh" size="14px" color="unset" class="mr-1"/>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-space wrap class="!mb-4 !mt-4">
      <a-button type="primary" plain class="flex items-center" @click="openUser(null, 'create')"
                 v-hasPermission="['system:user:add']">
        <icon icon="ep-plus" size="14px" color="unset" class="mr-1"/>
        新增
      </a-button>

      <a-button success plain class="flex items-center" @click="handleUpdate"
                 v-hasPermission="['system:user:edit']">
        <icon icon="ep-edit" size="14px" color="unset" class="mr-1"/>
        编辑
      </a-button>

      <a-button danger plain class="flex items-center" @click="handleDelete"
                 v-hasPermission="['system:user:delete']">
        <icon icon="ep-delete" size="14px" color="unset" class="mr-1"/>
        删除
      </a-button>
    </a-space>

    <a-table :data-source="sysUserList" :border="true" size="large" highlight-current-row :pagination="false">
      <a-table-column width="55">
        <template #default="{record,index}">
          <a-radio v-model:value="selectIdIndex" :value="index" :disabled="record.userId === 1"
                    @change="handleSelectionChange(index,record)"></a-radio>
        </template>
      </a-table-column>
      <a-table-column data-index="userId" title="主键ID"/>
      <a-table-column data-index="userName" title="用户账号"/>
      <a-table-column data-index="nickName" title="用户昵称"/>
      <a-table-column data-index="phonenumber" title="手机号"/>
      <a-table-column data-index="status" title="状态">
        <template #default="{record}">
          <a-switch
              v-model:checked="record.status"
              class="ml-2"
              inline-prompt
              :checked-value="0"
              :un-checked-value="1"
              active-text="正常"
              inactive-text="禁用"
              @change="(value)=>handleChangeStatus(value,record)"
              :disabled="record.userId === 1"
          />
        </template>
      </a-table-column>
      <a-table-column data-index="createTime" title="创建时间"/>
      <a-table-column fixed="right" title="操作" width="200px">
        <template #default="{record}">
          <div v-if="record.userId !== 1" class="flex items-center">
            <a-button class="ml-2" type="link" @click="openUser(record.userId,'update')"
                       v-hasPermission="['system:user:edit']">编辑
            </a-button>
            <a-button class="ml-2" type="link" danger @click="delSysUser(record.userId)"
                       v-hasPermission="['system:user:delete']">
              删除
            </a-button>
            <a-button class="ml-2" type="link" @click="handleResetPwd(record.userId)"
                       v-hasPermission="['system:user:resetpwd']">
              重置密码
            </a-button>
          </div>
        </template>
      </a-table-column>
    </a-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryForm.pageNo"
        v-model:limit="queryForm.pageSize"
        @pagination="getList"/>

    <sys-user-form ref="sysUserFormRef" @success="getList"/>
    <sys-user-reset-pwd-form ref="resetPwdRef" @success="getList"/>
  </div>
</template>

<style scoped lang="scss">

</style>
